﻿/**
 * For customer.
 */
Ext.define('SmartClient.view.ProductsView',
   {
      extend: 'Ext.panel.Panel',
      inject: ['productsStore'],
      controller: 'SmartClient.controller.ProductsController',

      id: 'productsPanel',

      items:
         [
            {
               xtype: 'toolbar',
               itemId: 'topToolbar',
               items:
                  [
                     '->',
                     {
                        xtype: 'button',
                        itemId: 'viewOrdersHistoryButton',
                        text: 'Orders history'
                     },
                     {
                        xtype: 'button',
                        itemId: 'viewAddedProductsButton'
                     }
                  ]
            },
            {
               id: 'productsList',
               autoScroll: true,
               tpl: new Ext.XTemplate(
                  "<table class='productsListTable'>",
                  "<tpl for='.'>",
                     "<tr id='{id}' class='productRow'>",
                        "<td>",
                           "<div class='product-name'><b>{name}</b></div>",
                           "<table>",
                              "<tr>",
                                 "<td>",
                                    "<img src='{image}' alt='image' class='product-image'>",
                                 "</td>",
                                 "<td class='detailedInfo'>",
                                    "<p><b>Price:</b> ${price}</p>",
                                    "<p><b>Available amount:</b> {availableAmount}{units}</p>",
                                    "<p><b>Description:</b> {description}</p>",
                                 "</td>",
                              "</tr>",
                           "</table>",
                           "<div class='add-to-order-button' id='addToOrderButton{id}'></div>",
                        "</td>",
                     "</tr>",
                  "</tpl>",
                  "</table>"
                  )
            }
         ]
   });